<template>
  <div>
    <v-chart class="carlo" :option="option" />
    <h1>PI: {{pi}}</h1>
  </div>
</template>

<script>
function getPoints(m = 10000) {
  let n = 0;
  let points = [];
  for (let i = 0; i < m; i++) {
    let p = [Math.random(), Math.random()];
    let x = p[0];
    let y = p[1];
    // in circle
    let c = "blue";
    if (x * x + y * y <= 1) {
      n++;
      c = "red";
    }
    points.push({
      value: p,
      itemStyle: {color: c}
    });
  }
  let pi = (n / m * 4);
  return {
    points: points,
    pi: pi
  }
}

const pp = getPoints();

import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import {ScatterChart} from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";

use([
  CanvasRenderer,
  ScatterChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  name: "MonteCarlo",
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "dark"
  },
  data() {
    return {
      pi: pp.pi,
      option: {
        xAxis: {},
        yAxis: {},
        series: [{
          symbolSize: 3,
          data: pp.points,
          type: 'scatter'
        }]
      }
    }
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped>
.carlo {
  width: 500px;
  height: 500px;
}
</style>